import { useState } from 'react';
import BellaHeader from '@/components/header';
import { RightOutlined, udp, useAllReady, useAsyncEffect } from '@cscec/udp-mobile-ui';
import { getList } from './service';
import styles from './acticleStudy.less';
import { FloatButton } from 'antd';
import LazyImage from '@/components/LazyImage';

const LearningPage = () => {
    const { unit, title, topic } = udp.getQueryValue()
    // 模拟数据
    const [articlePage, setArticlePage] = useState<any[]>([]);
    useAllReady(async () => {
        //获取主题
        const res = await getList({
            pageIndex: 1, pageSize: 999, unit_id: unit
        })
        if (res.record.length > 0) {
            setArticlePage(res.record)
        }
    })

    const handleClick = (it) => {
         udp.open('/ReadStudy', {title: JSON.stringify(title), id: it})
        // udp.open('/Textbook', {
        //     unit: unit, topic: topic, title: title
        // })
    }

    return (
        <div className={styles["kb1-container"]}>
            {/* 头部区域 */}
            <BellaHeader title={title}/>
            {/* 主要内容区域 */}
            <main className={styles["main-content"]} style={
                articlePage.length==1?{
                    marginTop:"30%"
                }:{}
            }>
                {/* 教材名称 */}
                {/* <Card className={styles["textbook-card"]}>
                    <div className={styles["textbook-info"]}>点击页面封面开始学习</div>
                </Card> */}
                {/* {图片列表} */}
                <div className={styles["images-grid"]}>
                    {articlePage.map((image) => (
                        <div key={image.id} className={styles["image-card"]}onClick={()=>{
                            handleClick(image.id)
                        }} >
                            <div className={styles["image-wrapper"]}>
                                <LazyImage src={image.imgUrl} alt={image.title} />
                                {/* 右侧箭头指示器 */}
                                <FloatButton className={styles["arrow-indicator"]} icon={<RightOutlined />} onClick={handleClick} />
                            </div>
                        </div>
                    ))}
                </div>
            </main >

        </div >
    );
}

export default LearningPage;

